<!DOCTYPE html>
<html>
<head>
	<title>Carousel</title>
	<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
	<link rel="stylesheet" type="text/css" href="css/bootstrap-responsive.min.css">
	<link rel="stylesheet" type="text/css" href="css/bootstrap-theme.min.css">
	 <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
      <![endif]-->
      <link rel="stylesheet" type="text/css" href="css/carousel.css">

  </head>
  <body>
  	<div class="container">
  		<div class="row">
  			<div class="col-md-10 startFromNav">
  				<a href="#" class="pull-left">
  					<img src="http://www.cakezest.com/skin/frontend/default/bluescale/images/logo.gif" class="img-responsive">
  				</a>
  			</div>

  			<div class="col-md-2 pull-right">
  				<p class="phone">
  					<img src="http://www.cakezest.com/media/bluescale/us_flag.gif" > 281-560-3401
  				</p>
  				<p class="phone">
  					<img src="http://www.cakezest.com/media/bluescale/us_flag.gif" > 281-560-3401
  				</p>
  				<p class="phone">
  					<img src="http://www.cakezest.com/media/bluescale/us_flag.gif" > 281-560-3401
  				</p>
  			</div>  		
  		</div>
  		<div class="navbar navbar-inverse" role="navigation">
  			<div class="container">
  				<div class="navbar-header">
  					<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
  						<span class="sr-only">Toggle navigation</span>
  						<span class="icon-bar"></span>
  						<span class="icon-bar"></span>
  						<span class="icon-bar"></span>
  					</button>
  				</div>
  				<div class="collapse navbar-collapse navbar-right">
  					<ul class="nav navbar-nav">
  						<li class="active"><a href="#">Home</a></li>
  						<li><a href="#about">About</a></li>
  						<li><a href="#contact">Contact</a></li>
  					</ul>
  				</div><!--/.nav-collapse -->
  			</div>
  		</div>
  	</div>

  	<!-- carousel -->
  	<div class="container">
  		<div class="row">	
  			<div class="col-md-12">
  				<div id="myCarousel" class="carousel slide">
  			<ol class="carousel-indicators">
  				<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
  				<li data-target="#myCarousel" data-slide-to="1"></li>
  				<li data-target="#myCarousel" data-slide-to="2"></li>
  			</ol>
  			<div class="carousel-inner">
  				<div class="item active">
  					<img src="img/nt1.jpg" class="img-responsive">
  				</div>
  				<div class="item">
  					<img src="img/nt2.jpg" class="img-responsive">
  				</div>
  				<div class="item">
  					<img src="img/nt3.jpg" class="img-responsive">
  				</div>

  			</div>
  			<a class="carousel-control left" href="#myCarousel" data-slide="prev">
  				<span class="icon-prev"></span>
  			</a>
  			<a class="carousel-control right" href="#myCarousel" data-slide="next">
  				<span class="icon-next"></span>
  			</a>
  		</div>
  			</div>
		</div>
	</div>
	<form>
		<div class="input-append">
			<input type="text" id="appendedInput" class="span2">
			<span class="add-on">.00</span>
		</div>

	</form>
	<form class="">
            <div class="input-prepend">
              <span class="add-on">@</span>
              <input class="span2" id="prependedInput" type="text" placeholder="Username">
            </div>
            <br>
            <div class="input-append">
              <input class="span2" id="appendedInput" type="text">
              <span class="add-on">.00</span>
            </div>
          </form>
  			<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  			<script type="text/javascript" src="js/bootstrap.min.js"></script>
  		</body>
  		</html>